<template>
	<view class="zx-text">
		<view :class="edit?'zx-text__preview-controller':'zx-text__preview'" :style="'background:'+childData.backgroundColor"
		 @click="comOnclick()">
			<view class="zx-text__content-wrap">
				<text class="zx-text__content" :style="'font-size:'+childData.fontSize+';color:'+childData.textColor+';text-align:'+childData.displayPosition+';'">{{ childData.text }}</text>
			</view>
		</view>

		<uni-popup ref="showpopup" :type="type" @change="change">
			<view class="popup-content">
				<view class="uni-form-item uni-column">
					<view class="uni-flex uni-row">
						<view class="text" style="width: 180rpx;">
							<view class="title">组件操作</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<view class="v-action">
								<view class="tag-view" @click="toUp">
									<uni-tag text="上移" size="small" />
								</view>
								<view class="tag-view" @click="toDown">
									<uni-tag text="下移" size="small" />
								</view>
								<view class="tag-view" @click="del">
									<uni-tag text="删除" size="small" />
								</view>
							</view>
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="text" style="width: 180rpx;">
							<view class="title">文本</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<input class="uni-input" name="nickname" placeholder="请输入文本" maxlength="100" :value="childData.text" @input="setTextValue" /></view>
					</view>

					<view class="uni-flex uni-row">
						<view class="text" style="width: 180rpx;">
							<view class="title">字体大小</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<radio-group name="gender" class="r-group" @change="setFontSizeValue">
								<label>
									<radio value="18px" :checked="(childData.fontSize=='18px')?true:false" /><text>大</text>
								</label>
								<label>
									<radio value="14px" :checked="(childData.fontSize=='14px')?true:false" /><text>中</text>
								</label>
								<label>
									<radio value="12px" :checked="(childData.fontSize=='12px')?true:false" /><text>小</text>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="text" style="width: 180rpx;">
							<view class="title">显示位置</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<radio-group name="gender" class="r-group" @change="setDisplayPositionValue">
								<label>
									<radio value="left" :checked="(childData.displayPosition=='left')?true:false" /><text>居左</text>
								</label>
								<label>
									<radio value="center" :checked="(childData.displayPosition=='center')?true:false" /><text>居中</text>
								</label>
								<label>
									<radio value="right" :checked="(childData.displayPosition=='right')?true:false" /><text>居右</text>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="text" style="width: 180rpx;">
							<view class="title">文字颜色</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<view class="v-action">
								<view class="tag-view">
									<view class="zx-color-picker__text" @click="openColorSelector(childData.textColor,'textColor')">
										<view class="zx-color-picker__preview" :style="'background-color: '+childData.textColor"></view>
									</view>
								</view>
								<view class="tag-view" @click="textColorReset">
									<uni-tag text="重置" />
								</view>
							</view>
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="text" style="width: 180rpx;">
							<view class="title">背景颜色</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<view class="v-action">
								<view class="tag-view">
									<view class="zx-color-picker__text" @click="openColorSelector(childData.backgroundColor,'backgroundColor')">
										<view class="zx-color-picker__preview" :style="'background-color: '+childData.backgroundColor"></view>
									</view>
								</view>
								<view class="tag-view" @click="backgroundColorReset">
									<uni-tag text="重置" />
								</view>
							</view>
						</view>
					</view>

					<view class="uni-flex uni-row">
						<view class="text" style="width: 180rpx;">
							<view class="title">链接</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<view class="v-to-select-page" @click="toSelectPage">
								<text v-if="childData.toUrl==''" class="t-to-select-page">选择跳转到的页面</text>
								<text v-else class="t-to-select-page">{{childData.toUrl.pageTitle}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<zx-page-list @send="setSelectPageValue" ref="zxPageList"></zx-page-list>
		<zx-color-picker ref="colorPicker" @confirm="colorSelectorConfirm"></zx-color-picker>
	</view>
</template>

<script>
	import uniSection from '@/components/uni-ui/uni-section/uni-section.vue'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import uniIcons from '@/components/uni-ui/uni-icons/uni-icons.vue'
	import uniTag from '@/components/uni-ui/uni-tag/uni-tag.vue'
	import zxPageList from '@/components/zx-diy/zx-page-list/zx-page-list.vue'
	import zxColorPicker from '@/components/zx-ui/zx-color-picker/zx-color-picker.vue'
	import {
		navToPage
	} from '@/common/util/util.js'
	export default {
		props: ["childData", "showState"],
		components: {
			uniSection,
			uniPopup,
			uniIcons,
			uniTag,
			zxPageList,
			zxColorPicker
		},
		created: function() {
		},
		data() {
			return {
				type: "",
				content: '顶部弹 popup',
				imageDel: '/static/del.png',
				edit: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {

			togglePopup(type, open) {
				console.log(this.childData.id)
				this.$data.edit = true;
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				if (!e.show) {
					this.edit = false
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			setTextValue(e) {
				this.childData.text = e.detail.value;
				this.$emit("changeData", this.childData);
			},
			setTitleStyleValue(e) {
				this.childData.titleStyle = e.target.value;
				this.$emit("changeData", this.childData);
			},
			setFontSizeValue(e) {
				this.childData.fontSize = e.target.value;
				this.$emit("changeData", this.childData);
			},
			del(e) {
				console.log(this.childData.id)
				this.$emit("send", this.childData.id);
			},
			toUp(e) {
				console.log(this.childData.id)
				this.$emit("up", this.childData.id);
			},
			toDown(e) {
				console.log(this.childData.id)
				this.$emit("down", this.childData.id);
			},
			toSelectPage(e) {
				// this.$emit("selectPage",this.childData.id);
				this.$refs.zxPageList.showPageList();
			},
			setDisplayPositionValue(e) {
				this.childData.displayPosition = e.target.value;
				this.$emit("changeData", this.childData);
			},
			setSelectPageValue(e, v) {
				this.childData.toUrl = e;
				this.childData.comType = v;
				this.$emit("changeData", this.childData);
			},
			openColorSelector(e, i) {
				// 打开颜色选择器
				this.$refs.colorPicker.open(e, i);
			},
			colorSelectorConfirm(e) {
				if (e.item == 'backgroundColor') {
					this.childData.backgroundColor = e.hex;
					this.$emit("changeData", this.childData);
				} else if (e.item == 'textColor') {
					this.childData.textColor = e.hex;
					this.$emit("changeData", this.childData);
				}
			},
			textColorReset(e) {
				this.childData.textColor = '#333333';
				this.$emit("changeData", this.childData);
			},
			backgroundColorReset(e) {
				this.childData.backgroundColor = '#ffffff';
				this.$emit("changeData", this.childData);
			},
			toUrl(i, p) {
				let tmp = 'pageDiy'
				uni.navigateTo({
					url: '/pages/index/diyPage?id=' + i + '&pageTitle=' + p + '&pageName=' + tmp
				});
			},
			comOnclick() {
				if (this.showState == 0) {
					this.togglePopup('bottom', 'popup')
				} else {
					if (this.childData.toUrl.id == undefined) {

					} else {
						navToPage(this.childData)
						// this.toUrl(this.childData.toUrl.id,this.childData.toUrl.pageTitle)
					}
				}
			}
		}
	}
</script>
<style lang="scss">
	.zx-text {
		position: relative;
		background-color: #FFFFFF;

		.zx-text__preview-controller {
			position: relative;
			min-height: 10px;
			border: 1px dashed #38f;
		}

		.zx-text__preview {
			position: relative;
			min-height: 10px;
		}

		.zx-text__content-wrap {
			position: relative;
			margin: 0 10px;
			padding: 10px 0;
		}

		.zx-text__content {
			font-family: initial;
			line-height: 24px;
			white-space: pre-wrap;
			word-break: break-all;
			display: block;
		}

		.v-action {
			position: relative;
			float: left;
			display: flex;
		}

		.popup-content {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			background-color: #F4F5F6;
			padding-right: 10px;
			font-size: 14px;
		}

		.i-del {
			width: 50upx;
			height: 50upx;
		}

		.tag-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
			justify-content: center;

		}

		.uni-row {
			margin-top: 20rpx;
		}

		.scroll-Y {
			height: 500rpx;
			width: 200rpx;
			margin-bottom: 120rpx;
			background-color: #FFFFFF;
		}

		.r-group {
			margin-top: 8rpx;
		}

		.v-to-select-page {
			margin-top: 8rpx;
		}

		.t-to-select-page {
			color: #38f;
		}

		.zx-color-picker__text {
			border: 1px solid #bbb;
			border-radius: 2px;
			display: inline-block;
			outline: none;
			padding: 5px;
			-webkit-transition: border-color .25s;
			-moz-transition: border-color .25s;
			transition: border-color .25s;
			background-color: #fff;
			position: relative;
		}

		.zx-color-picker__preview {
			width: 52px;
			height: 18px;
		}
	}
</style>
